<template>
  <div style="background-color: #f4f4f4; ">
    <!-- 顶部返回 -->
    <van-sticky>
      <van-nav-bar
        title="不凡"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>


    <div class="banner">
<img :src="banner.app_list_pic_url" alt="">
<p>{{banner.name}}</p>
    </div>

    <div class="zi">
 严选精选了MUJI制造商和生产原料，
用几乎零利润的价格，剔除品牌溢价，
让用户享受原品牌的品质生活。 
    </div>


    <!-- logo -->

<div class="logo" v-if="a">
<div class="demo" v-for="item in logo" :key="item.id">
    <img :src="item.list_pic_url" alt="">
    <p class="p1">{{item.name}}</p>
    <p class="p2">￥{{item.retail_price}}</p>

</div>
</div>


<div class="di" >
{{content}}
</div>




  </div>
</template>

    <script>
import { brandlist } from "@/api/home/brand/brandlist/index.js";
export default {
  data() {
    return {
        banner:"",
        logo:[],
        a:"",
        b:''

    };
  },
  computed: {
      content(){
          if (this.logo.length==0) {
              return   "数据库暂无数据..."
          }
      }
  },
 async created() {
 var res = await   brandlist({
      id:this.$route.params.id3,
    })
      console.log(res);
      this.banner = res.data;
     this.logo = res.goodsList;

    
  },
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

    <style scoped lang="scss">
    .banner{
        height: 145px;
        position: relative;
        img{
            width: 100%;
            height: 100%;
        }
        p{
            text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    font-size: .50667rem;
    color: #fff;
    border-bottom: .06667rem solid #fff;
    padding: .06667rem;
    margin: 0;
        }
    }
    .zi{
        background: #fff;
    padding: .56rem .42667rem;
    font-size: .4rem;
    color: #666;
    text-align: center;
    }
    .logo{
        margin-top: .26667rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .demo{
        width: 4.96667rem;
    margin-bottom: .06667rem;
    text-align: center;
    background: #fff;
    padding: .2rem 0;
    img{
        display: block;
    width: 4.02667rem;
    height: 4.02667rem;
    margin: 0 auto;
    }
    .p1{
        margin: .2rem 0 .29333rem 0;
    text-align: center;
    padding: 0 .26667rem;
    font-size: .32rem;
    }
    .p2{
        text-align: center;
    font-size: .4rem;
    color: #b4282d;
    }
    }
    }
    .di{
        text-align: center;
    color: #999;
    font-size: .42667rem;
    margin-top: 2.66667rem;
    }
</style>
